<template>
    <div>
        <el-form :inline="true" :model="page" class="demo-form-inline">
            <el-form-item label="品牌名称">
                <el-input v-model="page.name" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="品牌描述">
                <el-input v-model="page.desc" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="检索首字母">
                <el-input v-model="page.firstLetter" placeholder="精确查询"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="page.status" placeholder="请选择状态">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="initPage">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="resetParam">清空</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">新增品牌</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="brandList" style="width: 100%">
            <el-table-column prop="brandId" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="品牌名称">
            </el-table-column>
            <el-table-column prop="desc" label="品牌描述">
            </el-table-column>
            <el-table-column label="logo">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.imgUrl" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="firstLetter" label="检索首字母">
            </el-table-column>
            <el-table-column prop="seq" label="排序">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch></template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="updateBrand(scope.row.brandId)">编辑</el-button>
                    <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
                        title="确定删除吗？" @onConfirm="delBrand(scope.row.brandId)">
                        <el-button slot="reference" type="text" size="small">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total,prev, pager, next,sizes" :total="page.total" :page-size.sync="page.size"
            :pager-count="5" :current-page.sync="page.page" :page-sizes="[1, 10, 20, 50, 100, 500]"
            @current-change="pageChange" @prev-click="page.page--" @next-click="page.page++" @size-change="sizeChange"
            :hide-on-single-page="false">
        </el-pagination>
    </div>
</template>

<script>
import { brand_list, brand_del } from "@/api/product/brand";
export default {
    //import引入组件才能使用
    components: {},
    props: {},
    data() {
        return {
            page: {
                page: 1,
                size: 10,
                total: 0,
                name: "",
                desc: "",
                firstLetter: "",
                status: "",
            },
            brandList: [],

        };
    },
    // 计算属性
    computed: {},
    // 监听data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        pageChange(page) {
            this.page.page = page
            this.initPage()
        },
        sizeChange(size) {
            this.page.size = size
            this.initPage()
        },
        initPage() {
            brand_list(this.page).then(res => {
                this.brandList = res.data.list
                this.page.total = res.data.total
            })
        },
        resetParam() {
            this.page.name = ""
            this.page.desc = ""
            this.page.firstLetter = ""
            this.page.status = ""
        },
        addBrand() {
            this.$router.push({ name: "brand_add" })
        },
        updateBrand(id) {
            this.$router.push(
                {
                    name: "brand_update",
                    params: {
                        id
                    }
                })
        },
        delBrand(id) {
            brand_del(id).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.initPage()
            })
        }
    },
    // 生命周期，创建完成时（可以访问当前this实例）
    created() {
        this.initPage()
    },
    // 生命周期：挂载完成时（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { },//生命周期：创建之前
    beforeMount() { },//生命周期：挂载之前
    beforeUpdate() { },//生命周期：更新之前
    updated() { },//生命周期：更新之后
    beforeDestroy() { },//生命周期：销毁之前
    destroyed() { },//生命周期：销毁完成
    activated() { },//如果页面有keep-alive缓存功能，这个函数会触发执行
}
</script>
<style scoped></style>